<template>
    <div class="header">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                            data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="/" @click="">首页</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                        <li><a href="#">Link</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                               aria-haspopup="true" aria-expanded="false">分类 <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li><a href="/category/?movie_category=1">剧情</a></li>
                                <li><a href="/category/?movie_category=2">喜剧</a></li>
                                <li><a href="/category/?movie_category=3">动作</a></li>
                                <li><a href="/category/?movie_category=4">爱情</a></li>
                                <li><a href="/category/?movie_category=5">科幻</a></li>
                                <li><a href="/category/?movie_category=6">动画</a></li>
                                <li><a href="/category/?movie_category=7">悬疑</a></li>
                                <li><a href="/category/?movie_category=8">惊悚</a></li>
                                <li><a href="/category/?movie_category=9">恐怖</a></li>
                                <li><a href="/category/?movie_category=10">犯罪</a></li>
                                <li><a href="/category/?movie_category=11">音乐</a></li>
                                <li><a href="/category/?movie_category=12">战争</a></li>
                                <li><a href="/category/?movie_category=13">冒险</a></li>
                                <li><a href="/category/?movie_category=13">会员精选</a></li>
                            </ul>
                        </li>
                    </ul>
                    <form class="navbar-form navbar-left">
                        <div class="form-group">
                            <input type="text" v-model="search_key" class="form-control" placeholder="电影名">
                        </div>
                        <button type="button" @click="go_search()" class="btn btn-default">搜索</button>
                    </form>
                    <ul class="nav navbar-nav navbar-right">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                               aria-haspopup="true" aria-expanded="false">
                                <el-col :span="12">
                                    <div class="demo-basic--circle">
                                        <div class="block">
                                            <el-avatar :size="40" :src="circleUrl"></el-avatar>
                                        </div>
                                    </div>
                                </el-col>
                                <span class="caret" v-show="false"></span></a>
                            <ul class="dropdown-menu">
                                <li><a type="button" class="btn btn-primary" @click="put_login" v-if="!username">登录</a>
                                </li>
                                <li><a type="button" class="btn btn-primary" v-if="!username"
                                       @click="put_register">注册</a></li>
                                <li><a type="button" class="btn btn-primary" v-if="username" @click="change_avator">{{username}}</a>
                                </li>
                                <li><a type="button" class="btn btn-primary" v-if="is_vip" href="#">VIP用户</a></li>
                                <li><a type="button" class="btn btn-primary" v-if="!is_vip" href="#">普通用户</a></li>
                                <li><a href="#" type="button" class="btn btn-primary" data-toggle="modal"
                                       data-target=".bs-example-modal-lg">充值中心</a></li>
                                <li><a type="button" class="btn btn-primary" @click="put_login" href="#">切换账号</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a type="button" class="btn btn-primary" @click="logout">退出登录</a></li>
                            </ul>
                        </li>
                    </ul>
                    <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog"
                         aria-labelledby="myLargeModalLabel">
                        <div class="modal-dialog modal-lg" role="document">
                            <div class="modal-content">
                                <h1>会员充值中心</h1>
                                <div id="current1" data-code="1" title="一月VIP" @click="choice('一月VIP', 15)">
                                    <div class="one_m" style="color: rgb(107,107,107)"><h3>一月VIP</h3></div>
                                    <div class="ccpoil_price">
                                        <div class="ccpoil_final_price" style="color: rgb(253,175,91)"><h3>￥15</h3>
                                        </div>
                                    </div>
                                </div>
                                <div id="current2" data-code="1" title="一季VIP" @click="choice('一季VIP', 40)">
                                    <div class="one_m" style="color: rgb(107,107,107)"><h3>一季VIP</h3></div>
                                    <div class="ccpoil_price">
                                        <div class="ccpoil_final_price" style="color: rgb(253,175,91)"><h3>￥40</h3>
                                        </div>
                                    </div>
                                </div>
                                <div id="current3" data-code="1" title="半年VIP" @click="choice('半年VIP', 75)">
                                    <div class="one_m" style="color: rgb(107,107,107)"><h3>半年VIP</h3></div>
                                    <div class="ccpoil_price">
                                        <div class="ccpoil_final_price" style="color: rgb(253,175,91)"><h3>￥75</h3>
                                        </div>
                                    </div>
                                </div>
                                <div id="current4" data-code="1" title="年VIP" @click="choice('年VIP', 110)">
                                    <div class="one_m" style="color: rgb(107,107,107)"><h3>年VIP</h3></div>
                                    <div class="ccpoil_price">
                                        <div class="ccpoil_final_price" style="color: rgb(253,175,91)"><h3>￥110</h3>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>
        <Login v-if="is_login" @close="close_login" @go="put_register" @loginsuccess="login_success"/>
<!--        <Login v-if="is_login" @close="close_login" @go="put_register"/>-->
        <Register v-if="is_register" @close="close_register" @go="put_login" @registersuccess="register_success"/>
        <Right :is_drawer="drawer" @right_close="change_drawer" @change_icon=""/>
    </div>
</template>

<script>
    import Register from "./Register"
    import Login from "./Login"
    import Right from "./Right";

    export default {
        name: "Header",
        data() {
            return {
                circleUrl: this.$cookies.get('avator'),
                is_login: false,
                is_register: false,
                username: this.$cookies.get('username'),
                // is_vip: this.$cookies.get('is_vip'),
                is_vip: false,
                token: this.$cookies.get('token'),
                drawer: false,
                search_key: '',
            }
        },
        components: {
            Register,
            Login,
            Right
        },
        methods: {
            choice(e, price) {
                let token = this.$cookies.get('token');
                if (!token) {
                    this.$message({
                        message: "您还没有登录，请先登录",
                    })
                    return false
                }
                this.$axios({
                    method: 'post',
                    url: this.$settings.base_url + '/order/pay/',
                    data: {
                        "total_amount": price,
                        "subject": e,
                        "pay_type": 1,
                    },
                    headers: {Authorization: 'jwt ' + token}
                }).then(response => {
                    console.log(response.data)
                    let pay_url = response.data
                    //前端发送get请求
                    open(pay_url, '_self')
                }).catch(error => {
                })
                // }
            },
            go_login() {
                this.dialogVisible1 = true
            },
            go_register() {
                this.dialogVisible = true
            },
            put_login() {
                this.is_login = true;
                this.is_register = false;
            },
            put_register() {
                this.is_login = false;
                this.is_register = true;
            },
            close_login() {
                this.is_login = false;
            },
            close_register() {
                this.is_register = false;
            },
            login_success() {
                this.username = this.$cookies.get('username')
                this.token = this.$cookies.get('token')
                this.circleUrl = this.$cookies.get('avator')
                // this.is_vip = this.$cookies.get('is_vip')
            },
            register_success() {
                this.username = this.$cookies.get('username')
                this.token = this.$cookies.get('token')
                this.circleUrl = this.$cookies.get('avator')
            },
            logout() {
                this.$cookies.remove('token')
                this.$cookies.remove('username')
                this.$cookies.remove('avator')
                this.$cookies.remove('is_vip')
                //把两个变量值为空
                this.username = ''
                this.token = ''
                this.circleUrl = ''
                this.is_vip = ''
            },
            change_avator() {
                this.drawer = true
            },
            change_drawer() {
                this.drawer = false
            },
            go_search() {
                if (!this.search_key) {
                    this.$message('请输入要搜索的内容');
                }
                this.$router.push(`/search/?search=${this.search_key}`)
            }
        },
        created() {
            this.$axios.post(`${this.$settings.base_url}/user/check/`, {
                username: this.$cookies.get('username')
            }).then(response => {
                this.is_vip = response.data.code
                this.$emit('vip_status',this.is_vip)
            }).catch(error => {
            })
        }
    }
</script>

<style scoped>

    .modal-content div {
        box-sizing: border-box;
        display: block;
    }

    .modal-content {
        height: 500px;
    }

    #current1 {
        position: relative;
        float: left;
        background-color: #FFF7EB;
        margin-top: 20px;
        margin-left: 65px;
        height: 138px;
        border: 1px solid #E0E0E0;
        border-radius: 2px;
        cursor: pointer;
        width: 167px;
        display: inline-block;
    }

    #current2 {
        position: relative;
        float: left;
        background-color: #FFF7EB;
        margin-left: 30px;
        margin-top: 20px;
        height: 138px;
        border: 1px solid #E0E0E0;
        border-radius: 2px;
        cursor: pointer;
        width: 167px;
        display: inline-block;
    }

    #current3 {
        position: relative;
        float: left;
        background: #FFF7EB;
        margin-left: 30px;
        margin-top: 20px;
        height: 138px;
        border: 1px solid #E0E0E0;
        border-radius: 2px;
        cursor: pointer;
        width: 167px;
        display: inline-block;
    }

    #current4 {
        position: relative;
        float: left;
        background: #FFF7EB;
        margin-left: 30px;
        margin-top: 20px;
        height: 138px;
        border: 1px solid #E0E0E0;
        border-radius: 2px;
        cursor: pointer;
        width: 167px;
        display: inline-block;
    }

    /*.ccpoil_product{*/
    /*    position: relative;*/
    /*    !*float: left;*!*/
    /*    background: #FFF7EB;*/
    /*    margin-left: 30px;*/
    /*    height: 138px;*/
    /*    border: 1px solid #E0E0E0;*/
    /*    border-radius: 2px;*/
    /*    cursor: pointer;*/
    /*    width: 167px;*/
    /*    display: inline-block;*/
    /*}*/

    .header {
        border: 0;
        padding-bottom: 0;
        margin-bottom: 0;
    }

    .navbar-default {
        border: 0;
        padding-bottom: 0;
        margin-bottom: 0;
    }

    .search {
        float: right;
        position: relative;
        margin-top: 22px;
        margin-right: 10px;
    }

    .search input, .search button {
        border: none;
        outline: none;
        background-color: white;
    }

    .search input {
        border-bottom: 1px solid #eeeeee;
    }

    .search input:focus {
        border-bottom-color: orange;
    }

    .search input:focus + button {
        color: orange;
    }

    .search .tips {
        position: absolute;
        bottom: 3px;
        left: 0;
    }

    .search .tips span {
        border-radius: 11px;
        background-color: #eee;
        line-height: 22px;
        display: inline-block;
        padding: 0 7px;
        margin-right: 3px;
        cursor: pointer;
        color: #aaa;
        font-size: 14px;

    }

    .search .tips span:hover {
        color: orange;
    }
</style>